<template>
  <div class="app-container">
    <el-row >
      <el-form  ref="queryForm" size="small" :inline="true"  label-width="68px">

        <el-form-item label="年度" prop="statisticsDate">
          <el-date-picker
            v-model="statisticsDate"
            type="year"
            placeholder="年度"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查看</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row :gutter="20" style="padding-bottom: 20px">
      <el-col :span="8">
        <el-card>
          <div class="body">
            <echarts-wrapper :options="pieChartOptions"/>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card>
          <div class="body">
            <echarts-wrapper :options="barChartOptions"/>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card>
          <div class="body">
            <echarts-wrapper :options="lineChartOptions"/>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div class="body">
            <el-table  :data="classConsumptionRevenueDataList" >
              <el-table-column label="年度" align="center" prop="statisticsDate"/>
              <el-table-column label="课程数量" align="center" prop="subjectNumber"/>
              <el-table-column label="招收人数" align="center" prop="studentNumber"/>
              <el-table-column label="课消收入" align="center" prop="consumptionRevenue"/>
              <el-table-column label="课程应收" align="center" prop="subjectReceivables"/>
              <el-table-column label="课程未收" align="center" prop="subjectPendingPayments"/>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="body">
            <el-table  :data="annualProfitStatisticsDataList" >
              <el-table-column label="年度" align="center" prop="year"/>
              <el-table-column label="收入" align="center" prop="income"/>
              <el-table-column label="支出" align="center" prop="expenses"/>
              <el-table-column label="盈利" align="center" prop="profit"/>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import EchartsWrapper from '@/components/EchartsWrapper'
import {
  quarterlyConsumptionRevenueStatistics,
  incomeAndExpenditureStatistics,
  annualIncomeStatistics,
  annualClassConsumptionRevenue,
  annualProfitStatistics
} from '@/api/statistics/statistics'

export default {
  name: 'ProfitDashboard',
  components: { EchartsWrapper },
  data() {
    return {
      statisticsDate:new Date(),
      queryParams: {
        statisticsDate: null
      },
      pieChartOptions: {
        title: {
          text: '支出收入统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '教材采购' },
              { value: 735, name: '房租' },
              { value: 580, name: '工资' },
              { value: 800, name: '活动支出' },
              { value: 484, name: '其他' },
              { value: 1000, name: '其他收入' },
              { value: 10000, name: '课消收入' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      barChartOptions: {
        title: {
          text: '课消收入统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: ['一季度', '二季度', '三季度', '四季度']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [
              120,
              200,
              150,
              80
            ],
            type: 'bar'
          }
        ]
      },
      lineChartOptions: {
        title: {
          text: '年度收入统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: ['2020', '2021', '2022', '2023', '2024', '2025']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147],
            type: 'line'
          }
        ]
      },
      classConsumptionRevenueDataList:[
        {"statisticsDate":2021,"subjectNumber":5,"studentNumber":20,"consumptionRevenue":100000,"subjectReceivables":100000,"subjectPendingPayments":0},
        {"statisticsDate":2022,"subjectNumber":5,"studentNumber":40,"consumptionRevenue":200000,"subjectReceivables":200000,"subjectPendingPayments":0},
        {"statisticsDate":2023,"subjectNumber":5,"studentNumber":50,"consumptionRevenue":200000,"subjectReceivables":250000,"subjectPendingPayments":50000},
        {"statisticsDate":2024,"subjectNumber":5,"studentNumber":80,"consumptionRevenue":300000,"subjectReceivables":400000,"subjectPendingPayments":100000},
        {"statisticsDate":2025,"subjectNumber":5,"studentNumber":70,"consumptionRevenue":300000,"subjectReceivables":300000,"subjectPendingPayments":0},
      ],
      annualProfitStatisticsDataList:[
        {"year":2021,"income":100000,"expenses":100000,"profit":0},
        {"year":2022,"income":200000,"expenses":200000,"profit":0},
        {"year":2023,"income":200000,"expenses":250000,"profit":50000},
        {"year":2024,"income":300000,"expenses":400000,"profit":100000},
        {"year":2025,"income":300000,"expenses":300000,"profit":0},
      ]
    }
  },
  created() {

    this.getPieData()
    this.getBarData()
    this.getLineData()
    this.classConsumptionRevenue()
    this.annualProfit()
  },
  methods: {
    /** 饼图统计 */
    getPieData(){
      this.queryParams.statisticsDate = this.statisticsDate.getFullYear()
      incomeAndExpenditureStatistics(this.queryParams).then(response => {
        if(response.data && response.data.length > 0){
          this.pieChartOptions.series[0].data = response.data
        }
      })
    },
    /** 柱状图统计 */
    getBarData(){
      this.queryParams.statisticsDate = this.statisticsDate.getFullYear()
      quarterlyConsumptionRevenueStatistics(this.queryParams).then(response => {
        if(response.data && response.data.length > 0){
          this.barChartOptions.series[0].data = response.data
        }
      })
    },
    /** 折现图统计 */
    getLineData(){
      annualIncomeStatistics().then(response => {
        this.lineChartOptions.xAxis.data = response.data.years
        this.lineChartOptions.series[0].data = response.data.values
      })
    },
    /** 每年课消收入统计 */
    classConsumptionRevenue(){
      annualClassConsumptionRevenue().then(response => {
        this.classConsumptionRevenueDataList = response.data
      })
    },
    /** 每年盈利统计 */
    annualProfit(){
      annualProfitStatistics().then(response => {
        this.annualProfitStatisticsDataList = response.data
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {

    },
    /** 重置按钮操作 */
    resetQuery() {

    },
  }
}
</script>
